// 放大动效
.img-scale {
    --s: 200px;
    /* image size */
    --b: 3px;
    /* border thickness */
    --c: transparent;
    /* border color */
    --cb: transparent;
    /* background color */
    --f: 1;
    /* initial scale */

    width: var(--s);
    aspect-ratio: 1;
    padding-top: calc(var(--s)/5);
    cursor: pointer;
    // border-radius: 0 0 999px 999px;
    --_g: 50%/calc(100%/var(--f)) 100% no-repeat content-box;
    --_o: calc((1/var(--f) - 1)*var(--s)/2 - var(--b));
    outline: var(--b) solid var(--c);
    outline-offset: var(--_o);
    background:
        radial-gradient(circle closest-side,
            var(--cb) calc(99% - var(--b)), var(--c) calc(100% - var(--b)) 99%, #0000) var(--_g);
    -webkit-mask:
        linear-gradient(#000 0 0) no-repeat 50% calc(1px - var(--_o)) / calc(100%/var(--f) - 2*var(--b) - 2px) 50%,
        radial-gradient(circle closest-side, #000 99%, #0000) var(--_g);
    transform: scale(var(--f));
    transition: .5s;

    // &:hover {
    //     --f: 1.4;
    // }
}
// a标签样式
a{
    outline: none;
    color: #333;
    cursor: pointer;
    &:hover{
        color:#000 ;
    }
}
// 属性样式
.attributes {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;

    .attr {
        width: 50px;
        height: 25px;
        text-align: center;
        border-radius: 5px;
        color: #FFF;

        &:nth-child(2) {
            margin-left: 10px;
        }

        &.normal {
            background-color: rgb(159, 161, 159);
        }

        &.fire {
            background-color: rgb(230, 40, 41);
        }

        &.water {
            background-color: rgb(41, 128, 239);
        }

        &.grass {
            background-color: rgb(63, 161, 41);
        }

        &.electric {
            background-color: rgb(250, 192, 0);
        }

        &.ice {
            background-color: rgb(63, 216, 255);
        }

        &.combat {
            background-color: rgb(255, 128, 0);
        }

        &.poison {
            background-color: rgb(145, 65, 203);
        }

        &.ground {
            background-color: rgb(145, 81, 33);
        }

        &.fly {
            background-color: rgb(129, 185, 239);
        }

        &.super {
            background-color: rgb(239, 65, 121);
        }

        &.insect {
            background-color: rgb(145, 161, 25);
        }

        &.rock {
            background-color: rgb(175, 169, 129);
        }

        &.ghost {
            background-color: rgb(112, 65, 112);
        }

        &.dragon {
            background-color: rgb(80, 96, 225);
        }

        &.evil {
            background-color: rgb(80, 65, 63);
        }

        &.steel {
            background-color: rgb(96, 161, 184);
        }

        &.spirit {
            background-color: rgb(239, 112, 239);
        }
    }
}
// elment 样式
.el-dialog{
    border-radius: 20px !important;
}